<template>
  <div class="container">
    <div class="filter-container">
      <el-form ref="listQuery" :inline="true" :model="listQuery">
        <el-form-item label="报警类型">
          <el-select v-model="listQuery.warning_type" filterable="">
            <el-option :key="-1" label="全部" value="null"></el-option>
            <el-option v-for="(item ,index) in warning_type_list" :key="index" :label="item.title" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报警时间">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="middle" @click="search()">搜索</el-button>
          <el-button type="default" plain size="middle" @click="clear()">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
    :data="tableData"
    border
    style="width: 100%"
    :default-expand-all=true>
    <el-table-column type="expand">
      <template slot-scope="props">
        {{props.row.content}}。
        <el-link type="primary" @click="showView(props.row)"> 【查看详情】 </el-link>
      </template>
    </el-table-column>
    <el-table-column
      prop="warning_type_title"
      align="center"
      label="报警类型">
    </el-table-column>
    <el-table-column
      prop="group_title"
      label="设备组"
      align="center">
    </el-table-column>
    <el-table-column
      prop="device_title"
      label="设备名称"
      align="center">
    </el-table-column>
    <el-table-column
      prop="update_at"
      align="center"
      label="报警时间">
    </el-table-column>
    <el-table-column
      prop="status"
      align="center"
      label="处理状态">
      <template slot-scope="{row}"><span>{{{10:'已处理',20:'处理中',30:'待处理'}[row.status]}}</span></template>
    </el-table-column>
  </el-table>
  <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
    @pagination="getList" />
    <el-dialog  title="查看详情" :visible.sync='dialogVisible.show' :close-on-click-modal=false width="920px">
      <div class="content">
        <template v-if="image_urls && image_urls.length>0">
          <img class="look_img" :src="item" alt="" v-for="(item,index) in image_urls" style="width: 900px;" :key="index">
        </template>
        <template v-if="video_urls && dialogVisible.show">
          <div v-for="(item,index) in video_urls" :key="index" style="padding-bottom:5px" >
            <!-- <Video :src="item" :second="3" :width="500" :height="250" v-for="(item,index) in video_urls" :key="index" /> -->
            <JessibucaDemo :deviceId="currentRow.device_id" :stop_video="false" :control_Btn="false" :screen_width="900" :screen_height="450" :videoUrl="item" />
          </div>
        </template>
        <!-- <span slot="footer" class="dialog-footer flex-row  align-center justify-center" >
          <el-button type="primary" @click="dialogVisible.show = false">确定</el-button>
          </span> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {warning_type_list,warning_list } from '@/api/warn'
import Video from '@/components/VideoDemo.vue'
import Pagination from '@/components/Pagination/index.vue'
import JessibucaDemo from '@/components/JessibucaDemo.vue'
import store from '@/store'

  export default {
    components:{
        Pagination,Video,JessibucaDemo
    },
    data() {
      return {
        tableData: [],
        listQuery:{
          page:1,
          page_size:10,
          pageSize:10,
          warning_type:'',
          status:'',
          start:'',
          end:'',
          device_id:this.$route.query.id || ''
        },
        dialogVisible:{
          show:false
        },
        value1:'',
        status:[{title:'待处理',code:30},{title:'处理中',code:20},{title:'已处理',code:10}],
        total:0,
        roleList:[],
        groupList:[],
        warning_type_list:[],
        currentRow:{},
        image_urls:[],
        video_urls:[],
        controlBtn:{
          add:false,
          del:false,
          edit:false,
          auth:false
        }
      }
    },
    methods:{
      search(){
        this.listQuery.page = 1
        if (this.value1.length > 0) {
            this.listQuery.start = this.value1[0]
            this.listQuery.end = this.value1[1]
        }
        this.getList()
      },
      clear(){
        this.listQuery.page = 1
        this.listQuery.keyword = ''
        this.listQuery.warning_type = ''
        this.listQuery.status = ''
        this.listQuery.start = ''
        this.listQuery.end = ''
        this.value1 = ''
        this.getList()
      },

      getList(){
        warning_list(this.listQuery).then(res=>{
          this.tableData = res.data
          this.total = res.total
        })
      },
      showView(row){
        // console.log(row)
        this.currentRow = row
        if(row.image_urls){
          this.image_urls = row.image_urls.split(",")
        }else{
          this.image_urls = []
        }
        if(row.video_urls){
          this.video_urls = row.video_urls.split(",")
        }else{
          this.video_urls = []
        }
        this.dialogVisible.show = true
      },
    },

    mounted(){
      warning_type_list().then(res=>{
        this.warning_type_list = res
      })
      this.getList()
      const mainRoutes = store.getters.mainRoutes
      if(mainRoutes.warnlist && mainRoutes.warnlist.length>0){
        mainRoutes.warnlist.forEach(e=>{
          if(e == '增加'){
            this.controlBtn.add = true
          }
          if(e == '删除'){
            this.controlBtn.del = true
          }
          if(e == '修改'){
            this.controlBtn.edit = true
          }
          if(e == '权限'){
            this.controlBtn.auth = true
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialogVisible {
    ::v-deep.el-form-item__label{
      padding: 0 !important;
    }
  }
  .server { background: #f0f0f0; padding: 10px 15px; margin-bottom: 10px; }
  .content { overflow: hidden;
    .look_img { width: 100%; }
  }
</style>
